<template>
  <section class="content" id="content">
    <lq-form :form="form" :rules="rules" ref="addSafeDeviceStopStartFormRef">
      <template #footer>
        <div style="padding-bottom: 10px;" v-if="form.innerAttrs.disabled==false">
          <el-button type="primary"  @click="handleSubmit">提交</el-button>
        </div>
      </template>
    </lq-form>
  </section>
</template>
<script setup lang="ts">
import LqForm from "@/pages/components/LqForm.vue";

import {
  ref,
  reactive,
  onMounted,
  toValue,
  defineExpose,
  defineEmits,
  getCurrentInstance
} from "vue";
import {ElMessage, FormInstance, FormRules} from "element-plus";


/**
 * --------------全局共享上下文引入--------------------------
 */
const global = getCurrentInstance().appContext.config.globalProperties;



// 表单数据结构
const form = ref({
  innerAttrs: {
    labelPosition: 'right',
    labelWidth: 140,
    disabled: false,
    readonly:false
  },
  model: {
    id:'',
    deviceName:'',
    type:'',
    cause:'',
    startTime:'',
    expectEndTime:'',
    actualEndTime:'',
    isRemoveRelation:'',
    headName:'',
    headPhone:'',
    remark:'',
    planFile:'',
    recordFile:'',
    auditStatus:'',
    auditDate:'',
    orgId:'',
    sort:'',
    updateUser:'',
    updateTime:'',
    createUser:'',
    createTime:'',
  },
  formItems: [
      {type: 'input', label: '', prop: 'id', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'deviceName', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'type', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'cause', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'startTime', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'expectEndTime', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'actualEndTime', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'isRemoveRelation', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'headName', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'headPhone', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'remark', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'planFile', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'recordFile', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'auditStatus', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'auditDate', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'orgId', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'sort', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'updateUser', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'updateTime', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'createUser', span: 12, maxlength: 30, placeholder: '请输入姓名'},
    {type: 'input', label: '', prop: 'createTime', span: 12, maxlength: 30, placeholder: '请输入姓名'},
  ],
  buttonsAttrs: {
    // align: 'center'
  }
});

// 表单验证规则
const rules = reactive<FormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur'}],
deviceName: [{ required: true, message: '请输入', trigger: 'blur'}],
type: [{ required: true, message: '请输入', trigger: 'blur'}],
cause: [{ required: true, message: '请输入', trigger: 'blur'}],
startTime: [{ required: true, message: '请输入', trigger: 'blur'}],
expectEndTime: [{ required: true, message: '请输入', trigger: 'blur'}],
actualEndTime: [{ required: true, message: '请输入', trigger: 'blur'}],
isRemoveRelation: [{ required: true, message: '请输入', trigger: 'blur'}],
headName: [{ required: true, message: '请输入', trigger: 'blur'}],
headPhone: [{ required: true, message: '请输入', trigger: 'blur'}],
remark: [{ required: true, message: '请输入', trigger: 'blur'}],
planFile: [{ required: true, message: '请输入', trigger: 'blur'}],
recordFile: [{ required: true, message: '请输入', trigger: 'blur'}],
auditStatus: [{ required: true, message: '请输入', trigger: 'blur'}],
auditDate: [{ required: true, message: '请输入', trigger: 'blur'}],
orgId: [{ required: true, message: '请输入', trigger: 'blur'}],
sort: [{ required: true, message: '请输入', trigger: 'blur'}],
updateUser: [{ required: true, message: '请输入', trigger: 'blur'}],
updateTime: [{ required: true, message: '请输入', trigger: 'blur'}],
createUser: [{ required: true, message: '请输入', trigger: 'blur'}],
createTime: [{ required: true, message: '请输入', trigger: 'blur'}],
});


//向上注册刷新事件
const emit = defineEmits<{
  (e: 'flush', value: Object): void
}>()

// 表单验证规则
const addSafeDeviceStopStartFormRef = ref<FormInstance>();

const handleSubmit = async () => {
  const valid = await addSafeDeviceStopStartFormRef.value?.validateForm();
  if (valid) {
    global.$api.updateOrSaveSafeDeviceStopStart(Object.assign({}, form.value.model, {}))
        .then(({data}) => {
          if (data.status === 'OK') {
            ElMessage({type: "success", message: "操作成功！", duration: 4000});
            // form.value.innerAttrs.disabled=true;
            emit('flush', {});
          }
        });
  }

}



const handleReset = () => {
  addSafeDeviceStopStartFormRef.value?.resetFields();
  form.value.innerAttrs.readonly=false;
  form.value.model.id='';  //必须置空否则变成修改了

}
const handleViewOrEdit = (id:string,readyOnly:boolean) => {
  global.$api.getSafeDeviceStopStartById({id:id})
      .then(({data}) => {
        if (data.status === 'OK') {
          form.value.model = data.data;
          form.value.innerAttrs.readonly = readyOnly;
        }
      });

}

//暴漏组件操作接口
defineExpose({
  handleViewOrEdit, //编辑
  handleReset  //重置
})
</script>
